<!--
 * @Description:
 * @Autor: qsyj
 * @Date: 2022-12-13 10:24:39
 * @LastEditors: qsyj
 * @LastEditTime: 2023-03-16 16:33:09
-->
<template>
    <view class="board-table">
        <view v-if="showHeader" class="board-table__header">
            <table
                cellspacing="0"
                align="center"
                :class="[border ? 'showBorder' : '']"
            >
                <colgroup>
                    <col
                        v-for="(item, index) in columns"
                        :key="index"
                        :width="item.width"
                    >
                </colgroup>
                <thead>
                    <tr>
                        <th
                            v-for="(item, index) in columns"
                            :key="index"
                            class="font font--default"
                        >
                            <view>
                                {{ item.title }}
                            </view>
                        </th>
                    </tr>
                </thead>
            </table>
        </view>


        <view class="board-table__body">
            <table
                v-if="data.length"
                :class="[border ? 'showBorder' : '']"
                cellspacing="0"
                align="center"
                :style="{
                    'border-spacing': $attrs['border-spacing']
                }"
            >
                <colgroup>
                    <col
                        v-for="(item, index) in columns"
                        :key="index"
                        :width="item.width"
                    >
                </colgroup>
                <tbody>
                    <tr
                        v-for="(item, index) in data"
                        :key="index"
                        :style="trStyle"
                        :class="[index % 2 === 1 && stripe ? 'zb' : '']"
                        @click="tbodyClick(item)"
                    >
                        <th
                            v-for="(col, clIdx) in columns"
                            :key="`${col.key + clIdx}`"
                        >
                            <slot
                                :name="col.key"
                                v-bind="{ $index: index, row: item }"
                            >
                                {{ getVal(item, col.key) }}
                            </slot>
                        </th>
                    </tr>
                </tbody>
            </table>

            <view v-else class="board-table__empty">
                <slot name="empty"></slot>
            </view>
        </view>
    </view>
</template>
<script>

    export default {
        name: 'WebTable',
        props: {
            data: {
                type: Array,
                default: () => [],
            },
            columns: {
                type: Array,
                default: () => [],
            },
            scrollHeight: {
                type: [Number, String],
                default: 'auto',
            },
            maxScrollHeight: {
                type: [Number, String],
            },
            border: {
                type: Boolean,
                default: false,
            },
            http: {
                type: Function,
            },
            showHeader: {
                type: Boolean,
                default: true,
            },
            stripe: {
                type: Boolean,
                default: true,
            },
            trStyle: {
                type: Object,
                default: ()=> ({}),
            },
        },
        data() {
            return {
                tableData: [],
                query: {
                    page: 1,
                    limit: 10,
                },
                total: 0,
            };
        },
        methods: {
            getVal(form, s) {
                // rejct=>
                return s
                    .replace(/\[(\w+)\]/g, '.$1')
                    .replace(/^\./, '')
                    .split('.')
                    .reduce((prev, cur) => prev && prev[cur], form);
            },
            tbodyClick(item) {
                this.$emit('tableTrClick',item);
            },
        },
    };
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1rem;
}

.board-table {
    position: relative;
    &__body {
        min-height: 15rem;
        position: relative;
    }

    &__empty{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.8rem;
    border-collapse: separate;

    thead {
        th {
            // padding: .5rem;
            padding: .25rem;
            background-color: #eff8ff;
            text-align: left;
            font-weight: normal;
            color: #333333;
        }
    }
    tbody th {
        color: #333333;
        font-weight: normal;
        // padding: .5rem;
        padding: .25rem;

    }
    tbody tr {
        text-align: left;
        background-color: #fff;
        font-weight: normal;
        text-overflow: ellipsis
    }
}

.showBorder {
    border-right: 1px solid #dbddde;
    border-bottom: 1px solid #dbddde;

    thead {
        th {
            // height: 3rem;
            // line-height: 3rem;
            background-color: #eff8ff;
            text-align: left;
            border-top: 1px solid #dbddde;
            border-left: 1px solid #dbddde;
            font-weight: normal;
        }
    }
    tbody th {
        color: #333333;
        border-left: 1px solid #dbddde;
        border-top: 1px solid #dbddde;
        font-weight: normal;
    }
}

.zb {

    background-color: #f2f2f2;
}
</style>
